<template>
  <div class="div div1">
    <div class="aa aa1">充电量(KWh)</div>
    <el-table
      :data="tableData1"
      :header-cell-style="{
        borderTop: 'none',
        borderLeft: 'none',
        borderRight: 'none',
        color: 'blue',
      }"
      border
      style="width: 100%"
      :row-style="{ height: '48.5px', width: '48.5px' }"
      class="DDD"
    >
      <el-table-column
        :key="column.prop + column.label"
        v-for="column in checkedColumns1"
        :prop="column.prop"
        :label="column.label"
        align="center"
        width="130"
      />
    </el-table>
  </div>
  <el-checkbox-group
    v-model="checkedColumns"
    @change="handleCheckedCitiesChange"
  >
    <el-checkbox v-for="column in columns1" :key="column" :label="column">
      {{ get(column) }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
// const cityOptions = ["上海", "北京", "广州", "深圳"];
const columnAll = [
  {
    prop: "serialnumber",
    label: "序号",
  },
  {
    prop: "sharpelectricity",
    label: "尖电",
  },
  {
    prop: "phase",
    label: "峰电",
  },
  {
    prop: "ordinarytelegram",
    label: "平电",
  },
  {
    prop: "valleyelectricity",
    label: "谷电",
  },
  {
    prop: "total",
    label: "总计",
  },
];
const columnAll1 = [
  "serialnumber",
  "sharpelectricity",
  "phase",
  "ordinarytelegram",
  "valleyelectricity",
  "total",
];

export default {
  name: "MoreTableColumn",
  data() {
    return {
      checkAll: false,
      checkedColumns: ["serialnumber", "sharpelectricity"],
      checkedColumns1: [
        {
          prop: "serialnumber",
          label: "序号",
        },
        {
          prop: "sharpelectricity",
          label: "尖电",
        },
      ],
      columns: columnAll,
      columns1: columnAll1,
      tableData1: [
        {
          serialnumber: "1",
          name: "津荣储能站1",
          sharpelectricity: "1.12",
          phase: "12.12",
          ordinarytelegram: "100.12",
          valleyelectricity: "1.12",
          total: "300.34",
        },

        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
      ],
    };
  },
  methods: {
    handleCheckedCitiesChange(value) {
      console.log("选中的值：", value);

      this.checkedColumns1 = this.columns.filter(
        (v) => value.indexOf(v.prop) !== -1
      );

      console.log("打印数组", this.checkedColumns);
      console.log("打印数组222", this.checkedColumns1);
    },
    get(prop) {
      return this.columns.filter((v) => prop === v.prop)[0].label;
    },
  },
};
</script>